<template>
  <uv-popup ref="popupRef" :safeAreaInsetBottom="true" @change="change" :closeable="true" :round="'top'">
    <view class="rtl">
      <view class="address-title">
        {{ t("Address & Note") }}
      </view>
      <uv-form class="address-form" labelPosition="top" :model="addressInfo" :rules="rules" ref="form">
        <uv-form-item :label="t('Name：')" prop="rules.name">
          <uv-input v-model="addressInfo.name" :placeholder="t('Enter your name')">
          </uv-input>
        </uv-form-item>
        <uv-form-item :label="t('Phone：')" prop="rules.phone">
          <uv-input v-model="addressInfo.phone" :placeholder="t('Enter your name')">
          </uv-input>
        </uv-form-item>
        <uv-form-item :label="t('Location：')" prop="rules.address">
          <uv-input v-model="addressInfo.address" :placeholder="t('Enter your name')">
          </uv-input>
        </uv-form-item>
        <uv-form-item :label="t('Note：')" prop="rules.note">
          <uv-textarea v-model="addressInfo.note" :placeholder="t('Enter')"></uv-textarea>
        </uv-form-item>
      </uv-form>
      <view class="address-btn">
        <view class="address-btn-confirm" @click="popupRef.close()">Back</view>
        <view class="address-btn-confirm" @click="onConfirm">
          {{ t("Confirm") }}<uv-icon class="flip" name="arrow-right" color="#fff"></uv-icon>
        </view>
      </view>

    </view>
  </uv-popup>
</template>
<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
const emits = defineEmits(["confirm"])
const { t } = useI18n()
const popupRef = ref(null)
const addressInfo = ref({})
const rules = ref({
  name: [{ required: true, message: 'Please enter your name' }],
})
const form = ref(null)
onShow(() => {
  let address = uni.getStorageSync("address");
  if (address) {
    addressInfo.value = address;
  }
})
function onConfirm() {
  emits('confirm', addressInfo.value)
}
// 对外暴露方法
defineExpose({
  open: () => popupRef.value?.open('bottom'),
  close: () => popupRef.value?.close()
})

</script>
<style lang="scss" scoped>
@import "@/static/css/index.scss";

.address-form {
  padding: 20rpx;
}

.address-title {
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  text-align: center;
  font-weight: bold;

  .icon_img {
    width: 40rpx;
  }
}

.address-btn {
  display: flex;
  justify-content: space-between;
  color: #fff;
  background-color: $primary-b;
  height: 160rpx;
  padding: 0 20rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;

  .address-btn-confirm {
    display: flex;
    align-items: center;
  }
}
</style>